<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>别踩白块-困难模式</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/phone.css" />
		<link rel="stylesheet" type="text/css" href="../css/animation.css" />

	</head>

	<body>
		<div class="web">
			<div class="youxikuang">
				<div class="hang">
					<ul class="topnav">
						<li class="aa"></li>
						<li class="aa active"></li>
						<li class="aa"></li>
						<li class="aa "></li>
					</ul>
				</div>
			</div>
			<buttom class="dianji">开始</buttom>
			<div class="baise">别踩</div>
			<div class="heise">白块</div>
			<div class="topDiv"></div>
			<div class="ddddd"></div>
			<div class="lost  zoomInDown animated  flex">
				<p class="nb"></p>
				<p class="restGo">确定</p>
			</div>

		</div>
		<script src="../js/rem.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var n = 0;
			$(".hang").on("click", "li", function(e) {
					n++
					if ($(e.target).hasClass("active")) {
						$(".ddddd").html(n)
					} else {
						$(".lost").css("display", "block");
						$(".restGo").on("click", function() {
							history.back(-1)
						})

						$(".nb").html("恭喜获得" + (n - 1) + "分")

						$(".nb").html("恭喜获得" + (n - 1) + "分")

					}
					$(this).addClass("posui animated zoomOutDown")
					$(this).removeClass("active")
					$(this.parentNode).removeClass("topnav")
						/** 音效*/
					$(function() {
						$(".hang").on("click", "li", function() {
							showSound("../audio/wang573.wav");
						});
					});

					function showSound(a) {
						$("#hint").remove();
						let audioJQ = $("<audio src='" + a + "' autoplay id='hint'/>");
						audioJQ.appendTo("body");
					}

				})
				//			$(".dianji").on("click", function() {
				//					清除开始按钮
			$(".dianji").css("display", "none");
			$(".baise").css("display", "none");
			$(".heise").css("display", "none");
			$(".topDiv").css("display", "none");
			var timer = null;
			var i = 0;
			timer = setInterval(function() {
				var aaa = $("ul")
				var p = aaa.length - 1
				console.log(aaa);
				var suijishu = parseInt(Math.random() * 4) //生成0-3随机数
				var sss = document.querySelectorAll("li") //获取所有的li
				var top = $(aaa[p]).offset().top;
				var arr = document.querySelectorAll("ul")
				var pp = arr.length - 1;
				console.log("arr[pp]", arr[pp]);
				i++
				$(aaa[0]).clone().prependTo(".hang"); //在头上克隆一行新的
				$(sss[suijishu]).addClass("active animated rubberBand").siblings().removeClass("active animated rubberBand") //随机在li添加active

				console.log($(aaa[p]).offset().top); //最后一个ul距离顶部的距离
				if (top > 500) {
					if (aaa[p].className == "topnav") {
						$(".lost").css("display", "block");
						$(".restGo").on("click", function() {
							history.back(-1)
						})
						$(".nb").html("恭喜获得" + (n - 1) + "分")
						clearTimeout(timer)
							//							alert("失败了请从来");
							//							window.location.reload();
					} else {
						$(aaa).eq(-1).remove()
					}
				}
				//				清除计时器
				if (i > 1000) {
					clearTimeout(timer)
				}

			}, 450)

			//			})
		</script>

	</body>

</html>